<template>
	<!-- 订单卡片 -->
	<view class="sh-order-box u-m-b-10 u-p-r-20">
    <view class="sh-order-tit">
      <text>我的订单</text>
      <text class="more" @tap="jump('/pages/order/list', { type: 'all' })">全部 ></text>
    </view>
		<view class="order-box u-flex">
			<view class="order-item u-flex-col " @tap="jump('/pages/order/list', { type: order.type })" v-for="order in orderNav" :key="order.id">
				<view class="u-flex-col item-box u-col-center">
          <view class="order-img-box">
            <image class="order-img" :src="$IMG_URL + order.img" mode=""></image>
          </view>
					<text class="item-title">{{ order.title }}</text>
					<view class="badge" v-if="orderNum && orderNum[order.type]">{{ orderNum[order.type] }}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
/**
 * 订单中心卡片
 *
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			orderNav: [
        {
          id: 2,
          title: '已付款',
          img: '/imgs/other/user/order_status_2.png',
          type: 'nosend'
        },
				{
					id: 1,
					title: '待付款',
          img: '/imgs/other/user/order_status_1.png',
					type: 'nopay'
				},
				{
					id: 3,
					title: '待收货',
          img: '/imgs/other/user/order_status_3.png',
					type: 'noget'
				},
				// {
				// 	id: 4,
				// 	title: '待评价',
				// 	img: '/imgs/user/tab44.png',
				// 	type: 'nocomment'
				// },
				{
					id: 5,
					title: '我的退款',
          img: '/imgs/other/user/order_status_5.png',
					type: 'aftersale'
				}
			]
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userOtherData']),
		orderNum() {
			return this.userOtherData.order_num || 0;
		}
	},
	methods: {
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		}
	}
};
</script>

<style lang="scss">
.badge {
	position: absolute;
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	line-height: 24rpx;
	padding: 4rpx 10rpx;
	border-radius: 100rpx;
	color: #fff;
	font-size: 24rpx;
	z-index: 9;
	background-color: $u-type-error;
	transform: scale(0.8);
	transform-origin: center center;
	left: 100rpx;
	top: -6rpx;
	white-space: nowrap;
}
// 订单卡片
.sh-order-box {
  padding: 20rpx 0;
  .sh-order-tit{
    font-size: 34rpx;
    margin-left: 30rpx;
    color: #fa8a1a;
    margin-bottom: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .more{
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.5);
    }
  }
	.order-box {
		flex: 4;
	}
	.all-order {
		position: relative;
		.cut-off--line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: (750rpx/5) - 15rpx;
			width: 30rpx;
			height: 136rpx;
		}
	}

	.order-item {
		flex: 1;

		.item-box {
			position: relative;
		}
    .order-img-box{
      background: #907a68;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .order-img {
        width: 60rpx;
        height: 60rpx;
      }
    }

		.item-title {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			line-height: 24rpx;
			margin-top: 20rpx;
		}
	}
}
</style>
